<template>
    <div class="security-container">
        <div class="security-header">
            <div class="title"></div>
            <div class="using" @click="toContact">马上使用</div>
        </div>

        <div class="advantage-container">
            <my-title title="我们的优势"></my-title>

            <div class="advantage-body" v-for="(item, key) in advantageData">
                <div class="advantage-icon" :class="`advantage-icon-${key + 1}`"></div>
                <div class="advantage-content">{{item.content}}</div>
            </div>
        </div>
    </div>
</template>

<script>
	import myTitle from '../components/title'

    export default {
	    create() {
		    document.body.scrollTop = 0
	    },
    	components: {
		    myTitle
        },
        data() {
    		return {
			    advantageData: [{
			    	content: '全国385个城市落地服务商'
                },{
				    content: '异地员工社保一键搞定'
			    },{
				    content: '平台推荐各地最优质的落地服务商'
			    },{
				    content: '提高hr日常效率，减少人力成本'
			    },{
				    content: '数据全程加密，保证信息安全'
			    }]
            }
        },
	    methods: {
		    toContact() {
			    let ls = window.localStorage
			    ls.setItem('pageTitle', '账号申请')
			    ls.setItem('typeName', '企业社保系统试用申请')
			    ls.setItem('type', 1)
			    ls.setItem('ifCompany', 1)

			    document.body.scrollTop = 0
			    this.$router.push('contact')
		    }
        }
    }
</script>

<style lang="scss">
    @import "../style/function";
    @import "../style/color";

    .security-header {
        background-image: url("../images/security/security-banner.png");
        width: pxToRem(750);
        height: pxToRem(510);
        background-size: 100% 100%;
        position: relative;
        text-align: center;

        .title {
            height: pxToRem(80);
            line-height: pxToRem(80);
            position: absolute;
            top: 50%;
            margin-top: pxToRem(-40);
            color: $white;
            font-size: pxToRem(46);
            width: 100%;
        }

        .using {
            width: pxToRem(210);
            height: pxToRem(64);
            border: $red solid pxToRem(2);
            color: $red;
            line-height: pxToRem(70);
            border-radius: pxToRem(32);
            position: absolute;
            bottom: pxToRem(120);
            left: 50%;
            margin-left: pxToRem(-105);
            font-size: pxToRem(28);
        }
    }

    .advantage-container {
        background-color: $white;
        padding-bottom: pxToRem(60);

        .advantage-body {
            width: pxToRem(680);
            height: pxToRem(108);
            line-height: pxToRem(114);
            background-color: $lighter-grey;
            border-radius: pxToRem(54);
            border: $border-grey2 solid pxToRem(2);
            margin: 0 auto pxToRem(30);

            .advantage-icon {
                width: pxToRem(66);
                height: pxToRem(66);
                background-size: 100% 100%;
                margin: pxToRem(21) pxToRem(30) 0 pxToRem(40);
                float: left;
            }

            @for $i from 1 through 5 {
                .advantage-icon-#{$i} {
                    background-image: url('../images/security/' + $i + '.png');
                }
            }

            .advantage-content {
                font-size: pxToRem(32);
                color: $grey;
                font-weight: bold;
            }
        }
    }

</style>


















